import React from 'react';
import ReactECharts from 'echarts-for-react';

interface DonutPieChartProps {
  expiredPercent: number; // 0~1 or 0~100
  normalPercent: number; // 0~1 or 0~100
  prevExpiredPercent?: number; // 0~1 or 0~100
  expiredLabel?: string; // 传空或不传则不在图表中展示该项
  normalLabel?: string; // 传空或不传则不在图表中展示该项
  prevExpiredLabel?: string; // 传空或不传则不在图表中展示该项
  height?: number;
  centerTitle?: string; // 居中显示的标题
  centerSubTitle?: string; // 居中显示的副标题
  // 固定按 0~1 比例处理（显示时 *100，保留两位，不四舍五入）
}

const DonutPieChart: React.FC<DonutPieChartProps> = ({
  expiredPercent,
  normalPercent,
  prevExpiredPercent,
  expiredLabel = '',
  normalLabel = '',
  prevExpiredLabel = '',
  height = 200,
  centerTitle = '',
  centerSubTitle = '',
}) => {
  // 显示为百分比：固定按 0~1 比例处理（*100，保留两位，向下截取）
  const formatPercent = (v: number) => (Math.floor(v * 100) / 100).toFixed(2);

  const expiredRaw = expiredPercent || 0;
  const normalRaw = normalPercent || 0;
  const prevExpiredRaw = prevExpiredPercent ?? 0;

  const colors = {
    prevExpired: '#BFC5CF', // 已过期 灰
    expired: '#FFA940', // 即将过期 橙
    normal: '#1E6FFA', // 常规 蓝
  } as const;

  const rawData = [
    {
      value: prevExpiredRaw,
      name: prevExpiredLabel,
      itemStyle: { color: colors.prevExpired },
    },
    {
      value: expiredRaw,
      name: expiredLabel,
      itemStyle: { color: colors.expired },
    },
    {
      value: normalRaw,
      name: normalLabel,
      itemStyle: { color: colors.normal },
    },
  ];
  // 过滤未传或空字符串的 label 项，不在图表和图例中展示
  const data = rawData.filter((d) => typeof d.name === 'string' && d.name.trim() !== '');

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => `${params.name}: ${Number(params.value)}%`,
    },
    legend: {
      orient: 'vertical',
      right: 0,
      top: 0,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        fontSize: 14,
        color: '#1D2129',
      },
      formatter: (name: string) => {
        const item = data.find((d) => d.name === name);
        const val = item ? Number(item.value) : '0.00';
        return `${name}  ${val}%`;
      },
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['64%', '92%'],
        avoidLabelOverlap: false,
        label: { show: false },
        emphasis: {
          scale: false,
          label: { show: false },
        },
        labelLine: { show: false },
        // 使用统一的分割与圆角，模拟“隔断点”效果
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2,
          borderRadius: 8,
        },
        data,
        startAngle: 220,
        clockwise: true,
        hoverAnimation: false,
      },
    ],
    // 居中标题
    title: centerTitle
      ? {
          text: centerTitle,
          subtext: centerSubTitle,
          left: 'center',
          top: 'center',
          textStyle: { color: '#1D2129', fontSize: 18, fontWeight: 600, lineHeight: 22 },
          subtextStyle: { color: '#8E93A4', fontSize: 12, lineHeight: 16 },
        }
      : undefined,
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <ReactECharts option={option} style={{ height }} className="w-full" />
    </div>
  );
};

export default DonutPieChart;
